<!DOCTYPE html>
<html>
<head>
  <title>SVG.js</title>
  <script src="./../plugins/svg.min.js"></script>
  <script src="./../plugins/svg.easing.min.js"></script>
  <script src="./../plugins/svg.filter.js"></script>
  <script src="./../utils/utils.js"></script>
</head>
<body>
</body>
<script>

  var draw = SVG().addTo('body').size(800, 600)

  var circle, rect, triangle;
  function make() {
    rect = draw.rect(100,100).move(200, 200).attr({fill: SVG.Color.random(), stroke:'#3c352d'}).css("display", 'none')
    circle = draw.circle(100,100).move(200, 200).attr({fill:SVG.Color.random(), stroke:'#3c352d'}).css("display", 'none')
    triangle = draw.path("M 105,105 47,89 89,46 105,105 z").attr({fill:SVG.Color.random(), stroke:'#3c352d'}).move(220,220).css("display", 'none')

    var timeline = new SVG.Timeline()
    rect.timeline(timeline);
    circle.timeline(timeline);
    triangle.timeline(timeline);
  }

  make();

  const duration = 200; 
  function animates() {
    
    const ani1 = rect.animate({
        duration: duration,
        delay: 0,
        when: 'now',
        swing: false,
        times: true,
        wait: 3*duration
    }).css("display", 'inline')


    ani1.animate({
        duration: duration,
        delay: duration,
        when: 'now',
        swing: false,
        times: true,
        wait: 3*duration
    }).css("display", 'none');

    const ani2 = circle.animate({
        duration: duration,
        delay: duration,
        when: 'now',
        swing: false,
        times: true,
        wait: 3*duration
    }).css("display", 'inline');

    ani2.animate({
        duration: duration,
        delay: 2*duration,
        when: 'now',
        swing: false,
        times: true,
        wait: 3*duration
    }).css("display", 'none');
    
    const ani3 = triangle.animate({
        duration: duration,
        delay: 2*duration,
        when: 'now',
        swing: false,
        times: true,
        wait: 3*duration
    }).css("display", 'inline');

    ani3.animate({
        duration: duration,
        delay: 3*duration,
        when: 'now',
        swing: false,
        times: true,
        wait: 3*duration
    }).css("display", 'none');
  }

animates();

</script>
</html>